body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #f4f4f4;
}

#gameContainer {
  position: relative;
  width: 600px; /* 可以调整游戏区域的宽度 */
  height: 200px;
  margin: 0 auto; /* 水平居中显示 */
  background-color: #f9f9f9;
  overflow: hidden;
  margin-top: 100px;
}

#dino {
  position: absolute;
  bottom: 0;
  width: 83px;
  height: 75px;
  background-image: url('./小恐龙.png'); 
  background-size: cover; /* 确保图片覆盖整个障碍物区域 */
}

/* 设置障碍物的样式 */
#obstacle {
  position: absolute;
  bottom: 0; /* 障碍物位于游戏区域的底部 */
  right: 100%; /* 初始位置在游戏区域的右侧之外 */
  width: 50px; /* 根据图片尺寸调整 */
  height: 50px; /* 根据图片尺寸调整 */
  background-image: url('树桩.png'); /* 使用石头图片 */
  background-size: cover; /* 确保图片覆盖整个障碍物区域 */
  /* animation: moveObstacle 2s infinite linear; 障碍物的移动动画 */
}
/* 设置障碍物的样式 */
#obstacletwo {
  position: absolute;
  bottom: 0; /* 障碍物位于游戏区域的底部 */
  right: 100%; /* 初始位置在游戏区域的右侧之外 */
  width: 50px; /* 根据图片尺寸调整 */
  height: 50px; /* 根据图片尺寸调整 */
  background-image: url('树桩.png'); /* 使用石头图片 */
  background-size: cover; /* 确保图片覆盖整个障碍物区域 */
  /* animation: moveObstacle 2s infinite linear; 障碍物的移动动画 */
}


@keyframes moveObstacle {
  from { right: -20px; }
  to { right: 100%; }
}
@keyframes moveObstacletwo {
  from { right: -20px; }
  to { right: 100%; }
}

/* 添加跳跃动画 */
#dino.jump {
  animation: jump 0.5s infinite alternate; /* 跳跃动画 */
}

@keyframes jump {
  0% { bottom: 0; }
  50% { bottom: 100px; } /* 调整这个值以改变跳跃高度 */
  100% { bottom: 0; }
}

.btn-wai {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.startbutton {
  border: none;
  background-color: #4CAF50;
  color: #ffffff;
  cursor: pointer;
  width: 100px;
  height: 40px;
}